<template>
	<div class="add-shelves">
		<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px">
			<el-row :gutter="20">
				<el-col :span="12">
				<el-form-item label="图片:" class="upload-box" prop="image">
					<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res,0); } "
					 multipleaccept="image/*"> <img v-if="addForm.image" :src="addForm.image" class="preview-img" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="详情页主图:" class="upload-box">
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res,1); } "
						 multipleaccept="image/*"> <img v-if="addForm.img" :src="addForm.img" class="preview-img" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="PC背景大图:" class="upload-box">
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res,2); } " multipleaccept="image/*"> <img v-if="addForm.background_img" :src="addForm.background_img" class="preview-img" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="PC详情页主图:" class="upload-box" prop="">
						<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res,3); } " multipleaccept="image/*"> 
							<img v-if="addForm.pc_img" :src="addForm.pc_img" class="preview-img" />
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="名称:" prop="name">
						<el-input v-model="addForm.name" placeholder="请输入货架名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="类型:" prop="type">
						<el-select v-model="addForm.type" placeholder="请选择" @change="onChangeType">
							<el-option v-for="item in typeOptions" :key="item.type_id" :label="item.type_name" :value="Number(item.type_id)"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序:" prop="sort">
						<el-input v-model="addForm.sort" placeholder="请输入排序" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="空间编号:" prop="space_id">
						<el-select v-model="addForm.space_id" placeholder="请选择">
							<el-option v-for="item in spaceOptions" :key="item.space_id" :label="item.space_name" :value="item.space_id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="套餐:" prop="is_meal">
						<el-select v-model="addForm.is_meal" placeholder="请选择">
							<el-option v-for="item in mealOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="addForm.is_meal==4">
					<el-form-item label="小程序Appid:" prop="app_id">
						<el-input v-model="addForm.app_id" placeholder="请输入小程序Appid"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" v-if="addForm.is_meal==4">
					<el-form-item label="小程序链接:">
						<el-input v-model="addForm.app_link" placeholder="请输入小程序链接"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row v-if="addForm.type == 12">
				<el-col :span="12">
					<el-form-item label="满减金额:" prop="satisfy_money">
						<el-input v-model="addForm.satisfy_money" placeholder="请输入满减金额" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="副标题:" prop="subtitle">
						<el-input v-model="addForm.subtitle" placeholder="请输入货架副标题" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="副标题:" prop="subtitle" v-else>
				<el-input v-model="addForm.subtitle" placeholder="请输入货架副标题" clearable></el-input>
			</el-form-item>
			<el-form-item label="描述:" prop="brief">
				<el-input v-model="addForm.brief" type="textarea" :rows="3" placeholder="请输入描述"></el-input>
			</el-form-item>
			<el-form-item label="状态:" prop="is_show">
				<el-switch v-model="addForm.is_show" :active-value="1" :inactive-value="2"></el-switch>
			</el-form-item>
		</el-form>
		<el-button @click="cancel()">取 消</el-button>
		<el-button type="primary" @click="addFabricClick('addForm')">确 定</el-button>
	</div>
</template>

<script>
	export default {
		props: {
			layerid: {
				type: String,
				default: ''
			},
			id: {
				type: Number,
				default: 0
			},
			type: {
				type: Number,
				default: 0
			},
			parent_id: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				spaceOptions: [],
				typeOptions: [],
				addForm: {
					name: '',
					sort: '',
					is_show: 1,
					image: '',
					type: '',
					space_id: '',
					brief: '',
					img:'',
					subtitle: '',
					parent_id: this.parent_id,
					background_img: '',
					satisfy_money:'',
					is_meal:0,
					pc_img:'',
					app_id: '',
					app_link: ''
				},
				mealOptions:[
					{
						value:0,
						label:"单品"
					},
					{
						value:1,
						label:"全屋套餐"
					},
					{
						value:2,
						label:"N98套餐"
					},
					{
						value: 3,
						label: '任选套餐'
					},
					{
						value: 4,
						label: '其他小程序'
					}
				],
				addFormRules: {
					subtitle: [{
						required: true,
						message: '请输入副标题'
					}],
					brief: [{
						required: true,
						message: '请输入描述'
					}],
					sort: [{
						required: true,
						message: '请输入排序'
					}],
					image: [{
						required: true,
						message: '请上传图片'
					}],
					name: [{
						required: true,
						message: '请输入名字'
					}],
					space_id: [{
						required: true,
						message: '请选择空间'
					}],
					type: [{
						required: true,
						message: '请选择类型'
					}],
					is_meal:[{
						required: true,
						message: '请选择类型'
					}],
					app_id:[{
						required: true,
						message: '请输入小程序Appid'
					}],
				},
				isMoney:false
			};
		},
		methods: {
			init() {
				if (this.parent_id != 0) {
					this.addFormRules = {
						sort: [{
							required: true,
							message: '请输入排序'
						}],
						name: [{
							required: true,
							message: '请输入名字'
						}],
					}
				}

				let data = {
					limit: 100
				};
				this.$http(this.$ApiList.ClassSpaceList, data).then(res => {
					this.spaceOptions = res.datas.data;
				});
				let infoData = {};
				if (this.type != 0) {
					infoData.shelf_id = this.id
				}
				this.$http(this.$ApiList.ShelfInfo, infoData).then(res => {
					this.typeOptions = res.datas.shelf_type;
					if (this.type != 0) {
						this.addForm = res.datas.info;
					}
					if(this.type == 0) return
					if (res.datas.info.parent_id != 0) {
						this.addFormRules = {
							sort: [{
								required: true,
								message: '请输入排序'
							}],
							name: [{
								required: true,
								message: '请输入名字'
							}],
						}
					}
				});
			},
			// 图片上传
			upload(params,type) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt5MB = file.size / 1024 <= 5024;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt5MB) {
					this.$message.error('图片不能大于5M');
					return;
				}

				let image = new FormData();
				image.append('file[]', file);
				this.$http(this.$ApiList.publicUpload, image).then(res => {
					if(type == 0){
						this.addForm.image = res.datas[0];
					}else if(type == 1){
						this.addForm.img = res.datas[0];
					}else if(type == 2){
						this.addForm.background_img = res.datas[0];
					}else if(type == 3){
						this.addForm.pc_img = res.datas[0]
					}
				});
			},
			addFabricClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						this.addForm.store_id = 1
						if (this.type == 0) {
							this.$http(this.$ApiList.ShelfAdd, this.addForm).then(res => {
								this.$layer.msg(res.datas);
								this.$parent.init();
								this.cancel();
							});
						} else {
							this.$http(this.$ApiList.ShelfEdit, this.addForm).then(res => {
								this.$layer.msg(res.datas);
								this.$parent.init();
								this.cancel();
							});
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			cancel() {
				this.$layer.close(this.layerid);
			},
			// 类型
			onChangeType(e){
				if(e !== 12){
					this.addForm.satisfy_money = ''
				}
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.add-shelves {
		padding: 20px 20px;

		.el-upload,
		.preview-img {
			width: 300px;
			height: 200px;
		}

		.el-icon-plus {
			line-height: 200px;
			font-size: 60px;
		}
	}
</style>
